<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-07 11:49:57
 * @LastEditors: 171
 * @LastEditTime: 2022-09-22 18:11:53
-->
<script setup lang='ts'>

  import { ref, onMounted, watch } from 'vue'

  import { ElMessage, ElMessageBox } from 'element-plus'

  import { postMyApiArticle } from "../../server"
  import { useRouter } from 'vue-router'

  import Tab from '../../components/Tab.vue';

  const router = useRouter();
  const title = ref<string>("");
  const text = ref<string>("");
  const description = ref<string>("");

  const save = () => {
    if(text.value.length === 0){
      ElMessage({
        message: '内容不能为空哦',
        type: 'warning',
        duration: 1500,
      });
    }
    else{
      ElMessageBox.confirm(
        '您确定要执行此操作吗？',
        '添加此文章',
        {
          confirmButtonText: '确定',
          cancelButtonText: '我再想想',
          type: 'info',
        }
      ).then(() => {
        postMyApiArticle({ 
          title: title.value, 
          description: description.value,
          content: text.value, 
          publishTime: handleTime()
        },() => { 
          ElMessage({
            message: '增加文章成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              router.push('/talk');
              setTimeout(() => {
                location.reload()
              }, 500);  
            }
          });
        });
      });
    }
  }
  const handleUploadImage = (event: any, insertImage: Function, files: any) => {
    // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
    console.log(files);

    // 此处只做示例
    insertImage({
      url:
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.Russj_ScHRzeGEodKscxEgHaEo?pid=ImgDet&rs=1',
      desc: '七龙珠',
      // width: 'auto',
      // height: 'auto',
    });
  }

  function handleTime(){
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let Hours = date.getHours();
    let Minutes = date.getMinutes();
    let Seconds = date.getSeconds();
    return year + '-' + (month < 10 ? "0" + month : month) + '-' + 
      (day < 10 ? "0" + day : day) + ' ' + Hours + ':' + Minutes + ':' + Seconds;
  } 

</script>

<template>

  
  <div class="animate__animated animate__fadeInUp container">
    <Tab>
      <template #title>
        <el-input
          v-model="title"
          placeholder="标题"
          size="large" 
          maxlength="40"
          show-word-limit
          class="input title"
          :input-style="{color:'white'}"
        >
        </el-input>
        <br />
        <el-input
          v-model="description"
          placeholder="简述"
          size="large" 
          maxlength="120"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 3 }"
          class="input content"
          type="textarea"
          :input-style="{color:'white'}"
        >
        </el-input>
      </template>

      <template #content>
        <div class="editor">
          <v-md-editor 
            v-model="text" 
            height="100%" 
            @save="save"
            @upload-image="handleUploadImage"
          ></v-md-editor>
        </div>       
      </template>
    </Tab>
  </div>

</template>

<style scoped lang='less'>
  .container{
    width: 95%;
    height: 90%;
    color: #231321;
    margin: 0 auto;
    margin-top: 60px;
    .input{
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      background-color: transparent;
    }
    .title{
      width: 40%;
    }
    .content{
      width: 45%;
    }
    .editor{
      width: 100%;
      box-shadow: #fff 0 0 15px 0px ;//边框阴影
      height: 98%;
    }
  }
  :deep(.el-input__wrapper), :deep(.el-textarea__inner){
    background-color: transparent;
  }
  :deep(.el-input__count-inner), :deep(.el-input__count){
    background-color: transparent !important;
    color: #fff;
  }
  :deep(input::-webkit-input-placeholder), :deep(textarea::-webkit-input-placeholder) {    
    color:#fff !important;    
    opacity: 0.7;
  }
  
</style>